<template>
    <view class="content">
        <view class="player-content">
            <!-- #ifdef MP-WEIXIN -->
            <live-player id="livePlayer" class="live-player" catchtouchmove :src="sourceUrl" autoplay background-mute
                sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">
                <view class="player-tool" :style="{ bottom: (showControlbar ? '0' : '-60rpx') }">
                    <view class="tools">
                        <view class="full-screen" @tap.stop="handleFullScreen()">
                            <text class="iconfont" v-if="!fullScreenFlag">&#xe824;</text>
                            <text class="iconfont" v-else>&#xe67e;</text>
                        </view>
                        <view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
                            <text class="iconfont">&#xe625;</text>
                        </view>
                    </view>
                </view>
            </live-player>
            <!-- #endif -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isPlaySource: false, //是否有播放源
            isVideoLive: false, //是否是直播
            isAutoplay: true, //是否自动播放
            videoMsg: '', //video消息
            sourceUrl: '', //播放路径
            showControlbar: true,
            timer: null,
        }
    },
    watch: {
        showControlbar(val, oldVal) {
            if (val) {
                this.timer = setTimeout(() => {
                    this.showControlbar = false
                }, 5000)
            } else {
                clearTimeout(this.timer);
            }
        }
    },
    onLoad() {
        // #ifdef MP-WEIXIN
        this.playerCtx = uni.createLivePlayerContext('livePlayer');
        // #endif
    },
    created() {
        // #ifdef  MP-WEIXIN
        this.getLiveList()  //视频流列表
        //自定义控制栏自动隐藏的实现
        setTimeout(() => {
            this.showControlbar = false
        }, 10000)
        // #endif
    },

    methods: {
        handleControlbar() {
            this.showControlbar = !this.showControlbar
        },
        getLiveList() {
            this.$api.livePage.getLiveList().then(res => {
                //业务逻辑
            }).catch(err => {
                console.log('err');
            });
        },
        // 巡航
        handleCruise() {
            // #ifdef  MP-WEIXIN
            uni.vibrateShort();
            // #endif
        },
        //全屏功能的实现
        handleFullScreen() {
            var that = this
            if (!that.fullScreenFlag) {
                //全屏
                that.playerCtx.requestFullScreen({
                    success: res => {
                        that.fullScreenFlag = true
                        console.log('我要执行了');
                    },
                    fail: res => {
                        console.log('fullscreen fail');
                    },
                    direction: 90
                });
            } else {
                //缩小
                that.playerCtx.exitFullScreen({
                    success: res => {
                        that.fullScreenFlag = false
                        console.log('我要执行了');
                    },
                    fail: res => {
                        console.log('exit fullscreen success');
                    }
                });
            }
        },
    }
}
</script>


<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .player-content {
        position: relative;
        width: 100%;
        height: 450rpx;
        display: flex;
        background-size: 100% 100%;

        .live-player {
            width: 100%;
            height: 100%;
            position: relative;
        }
    }
}

//播放器弹出工具
.player-tool {
    width: 100%;
    height: 60rpx;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0;
    padding: 0 45rpx;
    transition: all 0.3s;

    .tools {
        height: 100%;
        width: auto;
        display: flex;
        align-items: center;

        .full-screen {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .iconfont {
                color: #fff;
                font-weight: bold;

            }
        }

        .cruise {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 25rpx;

            .iconfont {
                color: #E45A3E;
                font-size: 45rpx;
            }
        }
    }

}
</style>

